<template>
  <div>
    <h2>vue路由</h2>
    <!-- 导航区 -->
     <div>
      <router-link to="/home" active-class="selected">首页</router-link>
      <router-link :to="{path:'/product'}" active-class="selected">商品</router-link>
      <router-link :to="{name:'yh'}" active-class="selected">用户</router-link>
     </div>
     <hr>
     <!-- 展示区 -->
      <div class="container">
        <router-view></router-view>
      </div>
  </div>
</template>

<script setup>
import { RouterLink,RouterView } from 'vue-router';
</script>
<style>
.container{
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
.selected{
  background-color: red;
}
</style>
